<template>
  <div>
    <h1>列表重排</h1>
    <p>应该还有更优解</p>
    <ul>
      <li
        v-for="(item,index) in list"
        :key="index"
        :class="['item',{'active':item.number!=0}]"
        @click="selectNumber(index)"
      >
        <span v-if="item.number!=0">{{item.number}}</span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentCount: 0,
      list: [
        {
          active: true,
          number: 0,
          text: "选项1"
        },
        {
          active: true,
          number: 0,
          text: "选项2"
        },
        {
          active: true,
          number: 0,
          text: "选项3"
        },
        {
          active: true,
          number: 0,
          text: "选项4"
        },
        {
          active: true,
          number: 0,
          text: "选项4"
        },
        {
          active: true,
          number: 0,
          text: "选项5"
        },
        {
          active: true,
          number: 0,
          text: "选项6"
        },
        {
          active: true,
          number: 0,
          text: "选项7"
        },
        {
          active: true,
          number: 0,
          text: "选项8"
        },
        {
          active: true,
          number: 0,
          text: "选项9"
        },
        {
          active: true,
          number: 0,
          text: "选项10"
        }
      ]
    };
  },
  methods: {
    selectNumber(index) {
      let { list } = this;
      if (list[index].number != 0) {
        for (let i = 0; i < list.length; i++) {
          if (list[i].number > list[index].number) {
            list[i].number -= 1;
          }
        }
        this.currentCount--;
        list[index].number = 0;
      } else {
        this.currentCount++;
        list[index].number = this.currentCount;
      }
    }
  }
};
</script>

<style scoped>
ul {
  list-style: none;
}
.item {
  height: 50px;
  margin: 10px;
  background-color: bisque;
}

.active {
  height: 50px;
  margin: 10px;
  background-color: tomato;
}
</style>